<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> 

<!DOCTYPE html>
<html> 
<head>
<title>极客之家-绑定邮箱</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">



<style type="text/css">
.list-mail ul {
	border: 1px solid #aaa;
	line-heihgt: 24px;
	padding: 6px;
	background: #ddd;
}

.list-mail li {
	cursor: pointer;
	padding: 2px 3px;
	margin-bottom: 2px;
}

.list-mail .name {
	color: #982114;
}

.list-mail .hover {
	background: #fefacf;
}

.list-mail .select {
	background: #dedaae;
}
</style>
</head>

<body>
	
	<jsp:include page="top.jsp"></jsp:include>
	<div class="resetpwd_div">
		<!-- 这里单纯的使用一个div 没有布局成功，现在使用的是三个div，第一个和第三个只是起到布局效果 -->
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-6 col-xs-12 content_vcenter">
			<form role="form" action="user_toResetPwdUI.action" id="resetpwd_emailform" class=""> 
				<span>邮箱</span> <input type="text" name="email" id="bindEmail_input_eamil"
					class="form-control resetpwd_input_eamil"
					placeholder="input your email">  
				<span>验证码</span>  
				<div class="">
					<input type="hidden" name="uuid" id="bindEmail_id" value="${currentUser.uuid }">
				
					<input type="text" name="verifyCode" id="resetpwd_input_verifycode"
						class="form-control popover-show resetpwd_input_verifycode  "
						data-toggle="popover" data-trigger="manual" data-placement="auto"
						data-content="<div><span  style='color:red;'>验证码错误</span><div>"
						data-html=true placeholder="input your verifyCode">
					<button class="btn btn-primary resetpwd_btn_getVerifyCode  "
						id="bindEmail_btn_getVerifyCode">获取验证码</button>
	
				</div>
				<button class="btn btn-info resetpwd_btn_next" id="bindEmail_btn">绑定</button>
			</form>
		</div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
			
	</div>
	
	<script>
		
		var path='<%=basePath%>'; 
	
		$(function() {
			/* $('.popover-show').popover('show');
			$('.popover-show').popover('hide'); */
			/* 点击绑定  */  
			$('#bindEmail_btn').click(function() { 
				
				var email = $("#bindEmail_input_eamil").val();
				if (email.length < 1) {
					reset(); 
					alertify.error("邮箱不能为空");
					return false;
				}
				 
				// 发送 ajax 请求，验证邮箱验证码是否正确
				$.ajax({ 
					type : "POST",
					url : path+"user_bindEmail.action",
					data:{
						uuid:$("#bindEmail_id").val(), 
						verifyCode:$("#resetpwd_input_verifycode").val(),
						email:$("#bindEmail_input_eamil").val(),
					},
					async:false,
					dataType : 'json', 
					success : function(result) { // j1iqdq
						if(result.success){ 
							reset();
							alertify.success(result.data);
							window.location.href='<%=basePath%>'+"/pages/user_info.jsp";
							return false;
						}else{
							reset();
							alertify.error(result.data);
							return false;
						}
					}
				});
				return false;
			})
			$('input').focus(function() {
				$('.popover-show').popover('hide');
			})
			/* 点击获取验证码 */
			$('#bindEmail_btn_getVerifyCode').click(function() {
				var email = $("#bindEmail_input_eamil").val();
				if (email.length < 1) {
					reset();
					alertify.error("邮箱不能为空");
					return false;
				}
				
				var re = /\w@\w*\.\w/; 
				if (re.test(email)) { 	 	
				 	$.ajax({
							type : "POST",
							url : path+"user_getMailVerifyCode.action",
							data:{ 
								email:$("#bindEmail_input_eamil").val()
							},
							async:false,
							dataType : 'json',
							success : function(result) {
								//TODO 
								if(result.success){
									reset();
									alertify.success(result.data);
								}
								return result.success;
							}
						});
					
					this.disabled = 'disabled';
					var t = 60;
					var refresh = function() {
						$('#bindEmail_btn_getVerifyCode').text(t + "秒后再次获取");
						t--;
						if (t < 1) {
							$('#bindEmail_btn_getVerifyCode')[0].removeAttribute('disabled');
							$('#bindEmail_btn_getVerifyCode').text("重新获取");
							window.clearInterval(intervalId);
						}
					};
					refresh();
					var intervalId = window.setInterval(refresh, 1000);
					return true;
				} else {
					reset();
					alertify.error("请输入正确的邮箱");
					return false;
				}
				
			})
			
			
			/* 邮件自动填充  */
			$('#bindEmail_input_eamil').autoMail();

		});
		
		function validateEmailNotNull(){
			var email = $("#bindEmail_input_eamil").val();
			if (email.length < 1) {
				reset();
				alertify.error("邮箱不能为空");
				return false;
			}
		}
		
	</script>

</body>
</html>
